<template>
  <div class="headerPage">
    <div style="width: 150px"></div>

    <div class="title">
      <img src="../../../assets/img/title.png">
    </div>

    <div style="width: 150px">
      <div class="buttons">
        <button class="importData">导入</button>
        <div class="offButton">
          <img src="../../../assets/img/close.svg" style='height:20px;width:20px;'>
          <div>退出</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  }
}
</script>

<style scoped>
.headerPage{
  background-image: url("../../../assets/img/header.png");
  background-size: 100% 100%;
  width: 100%;
  height: 8vh;
  display: flex;
  justify-content: space-between;
}
.importData{
  background-color: #027db4;color:#ffffff;padding: 3px 10px;border: none;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
}
.title{
  display: flex;height: 8vh;
  align-items: center;justify-content: center;
}

.buttons{
  width: 140px;margin-top: 5px;display: flex;align-items: center; color:#ffffff;
}
.offButton{
  display: flex;align-items: center;font-size: 13px;margin-left: 20px;cursor: pointer;
}
</style>